<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <!-- 搜索栏 -->
      <form class="el-form el-form--inline avue-crud__search" style="margin: 14px 0px -7px 15px">
        <div class="el-form-item">
          <label class="el-form-item__label">课题名称:</label>
          <div class="el-form-item__content">
            <el-input v-model="plantitle" size="small" placeholder="请输入内容" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item avue-crud__searchMenu">
          <div class="el-form-item__content">
            <el-button class="myBtn" type="primary" icon="el-icon-search" @click.stop="searchSubmit()" >搜索</el-button>
            <el-button class="myBtn" type="reset" icon="el-icon-delete" @click.stop="resetSubmit()" >重置</el-button>
          </div>
        </div>
      </form>
      <div class="card-body">
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          :row-class-name="tableRowClassName"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            align="left"
            prop="mainTitle"
            label="名称"
            width="410">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                title="课题名称:"
                width="400"
                trigger="hover"
                :content="scope.row.mainTitle"
                v-if="scope.row.isChild">
                <a style="cursor:pointer;line-height: 15px;margin-left: 40px"
                   @click="subjectDetail(scope.row.subjectId)" slot="reference"
                   class="single_line_hidden">{{scope.row.mainTitle}}</a>
              </el-popover>
              <el-popover
                placement="top-start"
                title="规划名称:"
                width="400"
                trigger="hover"
                :content="scope.row.mainTitle"
                v-if="!scope.row.isChild">
                <span slot="reference" class="single_line_hidden"
                      @click="detailDialog(scope.row.achievementId,scope.row.pmuc)"
                      style="cursor:pointer;line-height: 15px;display:inline-block;font-weight: bold;width: 80%">
                  {{scope.row.mainTitle}}
                </span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="lastUploadTime"
            label="最新上传时间"
            width="120"
            :formatter="formatterTime">
          </el-table-column>
          <el-table-column
            align="center"
            prop="state"
            label="状态"
            :formatter="formatterState">
          </el-table-column>
          <el-table-column
            align="center"
            width="400">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
            </template>
            <template slot-scope="scope">
              <div class="menu-title" @click.stop="materialCollection(scope.row,scope.index)"
                   v-if="scope.row.isChild">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">材料收集</p>
              </div>
              <div class="menu-title" @click.stop="subjectReportHistory(scope.row,scope.index)"
                   v-if="scope.row.isChild">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">课题报告</p>
              </div>
              <div class="menu-title" @click.stop="opinionCollectionList(scope.row,scope.index)"
                   v-if="scope.row.isMainDept && scope.row.isChild && scope.row.state!='4'">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">征求意见</p>
              </div>
              <div class="menu-title" @click.stop="submitEndSubject(scope.row,scope.index)"
                   v-if="scope.row.isMainDept && scope.row.isChild&&(scope.row.state=='5'||scope.row.state=='6'||scope.row.state=='8')">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">结题申请</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2,5, 10, 20, 30, 40 ,50]"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="paginationcss">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="结题申请" :visible.sync="dialogVisible" width="1000px">
        <el-form
          label-width="130px"
          :model="projectForm"
          style="padding-right: 30px;"
          :rules="endSubjectRules"
          ref="projectForm"
        >
          <el-row>
            <el-col :span="20" style="margin-top: 10px;font-weight: 600">
              <el-form-item class="form-item" label="结题申请名称 :" prop="title">
                <el-input v-model="projectForm.title" placeholder="请输入结题申请名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="font-weight: 600">
            <el-col :span="20">
              <el-form-item class="form-item" label="结题申请说明 :" prop="description">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入结题申请说明"
                  v-model="projectForm.description"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="font-weight: 600">
            <el-col :span="20">
              <el-form-item class="form-item" label="拟共享范围 :" prop="openType">
                <el-select
                  v-model="projectForm.openType"
                  placeholder="请选择拟共享范围"
                  style="width: 280px"
                >
                  <el-option
                    v-for="item in openTypeDic"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="projectForm.openType=='1'" style="font-weight: 600">
            <el-col :span="18">
              <el-col :span="14">
                <el-form-item class="form-item" label="共享部门 :" prop="deptIdsNames">
                  {{projectForm.deptIdsNames}}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                           @click="clickLevyDept">部门
                </el-button>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="comitYes()">发 送</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
      <detail-dialog :achievementId="achievementIdDD"
                     :pmuc="pmucDD"
                     :showDetailDialog.sync="showDetailDialog"
                     :key="achievementIdDD"></detail-dialog>
      <el-dialog title="课题详情" :visible.sync="dialogVisibleSubject" width="1000px">
        <bostech-detail :detail-data="detailDataSubject" style="padding-top: 0px;"></bostech-detail>
        <div slot="footer" class="dialog-footer" style="padding-bottom: 20px">
          <el-button @click="dialogVisibleSubject = false">关 闭</el-button>
        </div>
      </el-dialog>
      <xieorg-tree :orgCodeVisiblesubmit="levyDeptCodeVisiblesubmit" @orgCodeClick="levyDeptCodeClick"
                   @orgCodeHandleClosesubmit="levyDeptCodeHandleClosesubmit"
                   @orgCodeCheckChange="levyDeptCodeCheckChange"></xieorg-tree>
    </div>
  </basic-container>
</template>

<script>
  import {getSubjectDeptList, getSubjectTreeList,submitEndSubject,getSubjectTreeDeptList} from "@/api/subject";
  import {Subject_DIC} from '@/const/dict'
  import {endSubjectRules} from '@/const/infoRules'
  import basisfile from "@/mixins/basisfile";
  import relatedfile from "@/mixins/relatedfile";
  import {mapGetters} from "vuex";
  import {getSubjectInfo} from "@/api/subject";
  import {getNotNull} from '@/views/util'

  export default {
    name: "subjectReportList",
    mixins: [basisfile, relatedfile],
    computed: {
      ...mapGetters([
        "deptInfo"
      ])
    },
    created() {
      var self = this;
      window.subjectDetail = self.subjectDetail;
      window.detailDialog = self.detailDialog;
      this.putTableData();
    },
    data() {
      return {
        headerData: {
          title: '课题研究'
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 5 // 每页显示多少条
        },
        dialogVisible: false,
        projectForm: {
          openType: '0',
          deptIds: [],
          description: '',
          title: '',
          subjectDeptId: 0,
          deptIdsNames: '',
        },
        endSubjectRules: endSubjectRules,
        openTypeDic: [
          {
            label: '全共享',
            value: '0',
          },
          {
            label: '不共享',
            value: '2',
          },
          {
            label: '部分部门共享',
            value: '1',
          },
        ],
        levyDeptCodeVisiblesubmit: false,//协同部门树弹窗标志
        tableData: [],
        plantitle:'',
        achievementIdDD: null,
        pmucDD: null,
        showDetailDialog: null,
        dialogVisibleSubject: false,
        detailDataSubject:[
          {label: '课题名称', value: ''},
          {label: '课题概述', value: ''},
          {label: '创建时间', value: ''},
        ],


        formatterTime: function (row, value, label, column) {
          if (row.lastUploadTime != null) {
            var data = row.lastUploadTime.split(' ');
            return data[0];
          }
        },
        formatterState: function (row, value, label, column) {
          if (row.state == '4') {
            return '报告未上传';
          } else if (row.state == '5') {
            return '报告已上传';
          } else if (row.state == '6') {
            return '征求意见';
          } else if (row.state == '7') {
            return '结题申请';
          } else if (row.state == '8') {
            return '结题申请未通过';
          }
        },
      }
    },
    methods: {
      // 课题详情跳转
      subjectDetail(subjectId) {
        this.dialogVisibleSubject = true;
        getSubjectInfo(subjectId).then(async response => {
          let records =await response.data.data;
          this.detailDataSubject = [
            {label: '课题名称', value: getNotNull(records.title)},
            {label: '课题概述', value: getNotNull(records.description)},
            {label: '创建时间', value: getNotNull(records.createTime)},
          ]

        });
      },
      detailDialog (achievementId,pmuc) {
        this.achievementIdDD = achievementId;
        this.pmucDD = pmuc;
        this.showDetailDialog = true;
      },
      // 课题详情跳转
      draftSubjectPlan() {
        let src = `/draftSubjectPlan/index`;
        this.$router.push({
          path: src
        })
      },
      // 课题历史版本跳转
      subjectReportHistory(row) {
        var stateControlBtn = '';
        if (row.state == '7'||row.state == '8') {
          stateControlBtn = '0'
        } else {
          stateControlBtn = '1'
        }
        let src = `/subjectReportHistory/detail/${row.subjectDeptId}`;
        this.$router.push({
          path: src,
          query: {
            subjectTitle: row.title,
            isMainDept: row.isMainDept,
            stateControlBtn: stateControlBtn,
            state:row.state
          }
        })
      },
      materialCollection(row) {
        var stateControlBtn = '1'; //材料收集不加状态控制了，
        // if (row.state == '7'||row.state == '8') {
        //   stateControlBtn = '0'
        // } else {
        //   stateControlBtn = '1'
        // }
        let src = `/materialCollection/detail/${row.subjectId}`;
        this.$router.push({
          path: src,
          query: {
            subjectTitle: row.title,
            type: '0',
            stateControlBtn: stateControlBtn
          }
        })
      },
      submitEndSubject(row) {
        this.dialogVisible = true;
        this.projectForm.title = this.deptInfo.name+"关于申请对《"+row.title+"》结题的函";
        this.projectForm.subjectDeptId = row.subjectDeptId;
      },
      opinionCollectionList(row, index) {
        var stateControlBtn = '';
        if (row.state == '7'||row.state == '8') {
          stateControlBtn = '0'
        } else {
          stateControlBtn = '1'
        }
        let src = `/collectionListUpload/list/${row.subjectId}`;
        this.$router.push({
          path: src,
          query: {
            type: '2',
            title: row.title,
            stateControlBtn: stateControlBtn
          }
        })
      },
      cancel() {
        this.dialogVisible = false;
      },
      comitYes() {
        if (this.projectForm.openType == '') {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择发布类型",
            duration: 2000
          });
          return;
        } else if (this.projectForm.openType == '1' && this.projectForm.deptIds.length == 0) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择公开部门",
            duration: 2000
          });
          return;
        }
        this.$refs.projectForm.validate(valid => {
          if (valid) {
            this.$confirm("确定发送结题申请吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              submitEndSubject(this.projectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "发送成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(0);
                }
              })
            })
          }
        })
      },
      // 弹出征集部门弹框
      clickLevyDept() {
        this.levyDeptCodeVisiblesubmit = true
      },
      levyDeptCodeClick() {
      },
      levyDeptCodeHandleClosesubmit() {
        this.levyDeptCodeVisiblesubmit = false
      },
      levyDeptCodeCheckChange(data) {
        this.projectForm.deptIdsNames = '';
        this.projectForm.deptIds = [];
        for (var i in data) {
          this.projectForm.deptIdsNames += data[i].name + ',';
          this.projectForm.deptIds.push(data[i].id);
        }
      },
      putTableData() {
        getSubjectTreeDeptList(Object.assign({
          current: this.page.currentPage,
          size: this.page.pageSize,
          states: '4,5,6,7,8',
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      searchSubmit(){
        this.page.currentPage = 1
        this.pageputTableData(this.plantitle)
      },
      resetSubmit(){
        this.plantitle= ''
        this.putTableData();
      },
      handleSizeChange(val) {
        var page = this.page;
        page.pageSize = val;
        this.pageputTableData(page,this.plantitle);
      },
      handleCurrentChange(val) {
        var page = this.page;
        page.currentPage = val;
        this.pageputTableData(page,this.plantitle);
      },
      pageputTableData(page) {
        getSubjectTreeDeptList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states: '4,5,6,7,8',
          titleLike: this.plantitle
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },

      tableRowClassName({row, rowIndex}) {
        if (row.state == undefined) {
          return 'success-row';
        }
        return '';
      },
    }
  }
</script>

<style lang="scss" scoped>
  .card-body {
    padding: 10px;
    min-height: 400px;
    padding-bottom: 64px;
  }

  .paginationcss {
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
  .myBtn{
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 3px;
  }
</style>


